import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.less';
import requestApi from './requestApi';
import { createPage, base, promptBox } from 'nc-lightapp-front';
import showImgUrl from '../../../expenseaccount/wallet/check-invoice/img/show-invoice.svg';
import hideImgUrl from '../../../expenseaccount/wallet/check-invoice/img/hide-invoice.svg';


const  { NCImage } = base;
//引入侧边栏
import AuditSidebar from 'sscia/auditSidebar/components/auditSidebar'
import { get } from 'lodash';
// import AuditSidebar from '../../../../sscia/auditSidebar/components/auditSidebar'
/**
 * @功能: 查验发票的组件
 * @作者：Mr.sha
 * @日期：2022-05-27
 */
 export default class CheckInvoce extends Component {
     constructor(props){
         super(props);
               //初始化侧边栏
        this.auditSidebar = new AuditSidebar();
         this.state = {
            // 左侧距离
            left: 1 ,
            // 整体数组 其中第一个是手动添加的最后一个，最后一个是手动添加的第一个 真实的数据是2,3,4
            list: [1,2,3,4,5],
            // 过度使用的时间
            transition: "0.5s",
            // 发票数据的对象
            invoiceDataObj: {},
            // 发票数据列表数组的下角标
            invoiceDataIndex: null,
            // 发票图片的base64位路径
            imgBaseUrl: null,
            // 发票类型名称
            fplxmc: null,
            showAuditSidebar:true,
            // 控制发票显隐的按钮图标路径
            invoiceShowIconUrl: showImgUrl,
            // 是否显示上半部分的发票
            invoiceTopIsShow: true
         }
     }


    componentDidMount() {
        if(this.props && this.props.onCheckInVoiceRef){
            this.props.onCheckInVoiceRef(this)
        } 
    }

     /**
     * @功能: 轮播图左侧按钮触发事件
     * @作者：Mr.sha
     * @日期：2022-05-30
     */
     buttonLeft() {
        let leftNew = this.state.left;
        this.setState({left: leftNew + 1, transition: "0.5s"})
        if(leftNew === this.state.list.length - 2){
            setTimeout(() => {
                this.setState({left: 1, transition: "none"});
            }, 500);
        }
        let params = {clickType: "left"};
        
        this.buttonMove(params);
     }

     /**
     * @功能: 轮播图右侧侧按钮触发事件
     * @作者：Mr.sha
     * @日期：2022-05-31
     */
     buttonRight() {
        let leftNew = this.state.left;
        this.setState({left: leftNew - 1, transition: "0.5s"});
        if(leftNew === 1){
            setTimeout(() => {
                this.setState({left: this.state.list.length - 2, transition: "none"});
            }, 500)
        }
        let params = {clickType: "right"};
        
        this.buttonMove(params);
    }

    //  invoiceList = {this.invoiceList}
    //  checkRowData = {this.state.checkRowData}
    //  checkRow = {this.checkRow}

    /**
     * @功能: 左右滑动时候图片加载参数的变化
     * @作者：Mr.sha
     * @日期：2022-06-15
     */
    buttonMove(params){
        // left  点击左侧箭头  right  点击右侧箭头
        let { clickType } = params;
        let invoiceDataIndex = this.state.invoiceDataIndex;
        let invoiceDataObj = null;
        let invoiceListLength = 0;
        if(this.props && this.props.invoiceList){
            invoiceListLength = this.props.invoiceList.length ;
        }
        if(clickType === "right"){  
            if(invoiceDataIndex === 0){
                invoiceDataIndex = invoiceListLength - 1;
            }
            else{
                invoiceDataIndex--;
            }
        }
        else{
            if(invoiceDataIndex === invoiceListLength - 1){
                invoiceDataIndex = 0;
            }
            else{
                invoiceDataIndex++;
            }
        }
        if(this.props && this.props.invoiceList){
            invoiceDataObj =  get(this.props.invoiceList[invoiceDataIndex], "head.head.rows[0].values",{}) ;
        }
        this.setState({invoiceDataObj,invoiceDataIndex});
        this.onhandleChangeInvoice({invoiceDataObj,invoiceDataIndex});
    }

    /**
     * @功能: 点击“查看发票”按钮请求的函数
     * @作者：Mr.sha
     * @日期：2022-06-10
     */
    onhandleChangeInvoice(params){
        // {发票数据的对象,发票数据列表数组的下角标}
        let {invoiceDataObj, invoiceDataIndex} = params;
        // 发票类型名称
        let fplxmc = get(invoiceDataObj, 'fplxmc.value');
        // 发票pk主键
        let pk_erminvoice = get(invoiceDataObj, 'pk_erminvoice.value');
        this.setState({invoiceDataObj, invoiceDataIndex, fplxmc},()=>{
            let paramsImg = {pk_erminvoice}
            this.refImg(paramsImg);
            
            this.toggleAuditSideBar()
        });
        
    }
    //展示侧边栏
    toggleAuditSideBar() {

        const {pk_group,pk_billtype,djlxbm,pk_erminvoice}= this.state.invoiceDataObj
        
        let param = {};
        param.pk_group = pk_group.value; // "集团pk"
        param.billtypecode = pk_billtype.value; // "单据类型code" 
        param.tradetypecode = djlxbm.value; // " 交易类型code"
        param.billid = pk_erminvoice.value; // "单据主键pk"
        param.src_type = "billmaker"; // billmaker:制单、 approve: 审批中心、 ssc: 共享
        param.iscreate = "Y"   // 注意应该是制单首次保存传Y,浏览态去掉这个参数！！！是否初始化单据信息，编辑状态传入 "Y"，浏览态不传  所有环节都传入 做初始化 智能审批
        param.isEdit = true;
        //  param.pk_group = "0001A510000000000NKA"; // "集团pk"
        // param.billtypecode = "267X"; // "单据类型code" 
        // param.tradetypecode = "267X"; // " 交易类型code"
        // param.billid = "1001A510000000003V27"; // "单据主键pk"
        // param.src_type = "billmaker"; // billmaker:制单、 approve: 审批中心、 ssc: 共享
        // param.iscreate =  "Y"  // 是否初始化单据信息，编辑状态传入 "Y"，浏览态不传  所有环节都传入
        // param.isEdit = true; // billmaker:制单、 approve: 审批中心、 ssc: 共享
        // this.auditSidebar.showSidebar(param,null,()=>{
        //     setTimeout(()=>{
        //         const auditSidebarObj = this.auditSidebar.getSidebarStatistical()
        //         const {pointTree} = auditSidebarObj
        //         if(!pointTree.length){
        //             this.setState({
        //                 showAuditSidebar:false
        //             })
        //         }
        //     })
        // })
        
        this.auditSidebar.showSidebar(param,null,()=>{
            setTimeout(()=>{
                this.auditSidebar.refreshSidebar()
            })
        })
    }

    /**
     * @功能: 刷新发票路径（base64）
     * @作者：Mr.sha
     * @日期：2022-06-13
     * @param {*} params {pk_erminvoice:pk主键}
     */
    refImg(params) {
        requestApi.invoiceQuery(
            {
                data: params,
                success: (data) => {
                    this.setState({imgBaseUrl: "data:image/jpg;base64," + data});
                }
            }
        );
    }

    getFormHeadValueByKey(key) { // 根据 form 获取 head 中的值
        return this.props.form.getFormItemsValue("head", key).value || '';
    }
    
    /**
     * @功能: 获取整个组件的样式
     * @作者：Mr.sha
     * @日期：2022-06-13
     */
    getCheckInvoceClass(){
        let styelArr = ['check-invoce'];
        if(this.props && this.props.checkInvoceIsHidden){
            styelArr.push('check-invoce-hidden');
        }
        return styelArr.join(" ");
    }

    /**
     * @功能: 获取整个组件的样式
     * @作者：Mr.sha
     * @日期：2022-06-20
     */
    setImgUrl(params){
        let { imgBaseUrl } = params;
        this.setState({imgBaseUrl});
    }

    /**
     * @功能: 关闭当前组件
     * @作者：Mr.sha
     * @日期：2022-06-13
     */
    onHanleHiddenCheckInvoce(params) {
        if(this.props && this.props.onHanleHiddenCheckInvoce){
            this.props.onHanleHiddenCheckInvoce(params);
        }
    }

    //弹出隐藏层
    showDiv(showDiv, bgDiv,imgUrl) {
        if(this.props && this.props.showDiv){
            let params = {showDiv, bgDiv,imgUrl}
            this.props.showDiv(params)
        }

    } 
    getStyle(){
        return {
            width: document.body.scrollWidth,
            height: document.body.scrollHeight
        }
    }

    closeDiv(show_div, bg_div) {
        if(document.getElementById(show_div) && document.getElementById(bg_div)){
            document.getElementById(show_div).style.display = 'none';
            document.getElementById(bg_div).style.display = 'none';
        }
    }


    invoiceShowOrHidden(show_div, bg_div) {
        if(document.getElementById(show_div) && document.getElementById(bg_div)){
            document.getElementById(show_div).style.display = 'none';
            document.getElementById(bg_div).style.display = 'none';
        }
    }

    /**
     * @功能: 整个组件的style
     * @作者：Mr.sha
     * @日期：2022-06-13 
     * @returns 
     */
    getCheckInvoceAllStyle() {
        let style = {};
        let { transfertableMainHeight } = this.props;
        if(transfertableMainHeight){
            style = {height: (transfertableMainHeight - 42) + "px"};
        }
        return style;
    }

    /**
     * @功能: 头部中left中的style
     * @作者：Mr.sha
     * @日期：2022-06-13 
     * @returns 
     */
    getCheckInvoceHeadLeftStyle() {
        let style = {marginLeft: "0"};
        if(this.props && this.props.invoiceList && this.props.invoiceList.length > 0) {
            style = {marginLeft: "6%"}
        }
        return style;
    }

     render() {
         let multiLang = this.props.MutiInit.getIntl(2011); 
         return ( 
             <div className = {this.getCheckInvoceClass()} style = {this.getCheckInvoceAllStyle()}>
                 <div className = "shell-head">
                     <div  className = "shell-head-content" >
                        <div className = "shell-head-left" style = {this.getCheckInvoceHeadLeftStyle()}>
                            {this.state.fplxmc}
                            <div className = "invoice-show"
                                onClick = {() => {
                                    // 新的控制发票显隐的按钮图标路径
                                    let newInvoiceShowIconUrl = showImgUrl;
                                    if(this.state.invoiceShowIconUrl && this.state.invoiceTopIsShow){
                                        newInvoiceShowIconUrl = hideImgUrl;
                                    }
                                    this.setState({invoiceShowIconUrl: newInvoiceShowIconUrl, invoiceTopIsShow: !this.state.invoiceTopIsShow});
                                }}

                            >
                                <img className = "invoice-show-icon"
                                src = {this.state.invoiceShowIconUrl} ></img>
                                <span className = "invoice-show-title">{
                                    this.state.invoiceTopIsShow ? 
                                    multiLang.get('201103INUP-0143') : 
                                    multiLang.get('201103INUP-0142')
                                }</span>
                            </div>

                        </div>
                     </div>
                     <div class="shell-head-delete-icon" onClick = {() => {this.onHanleHiddenCheckInvoce({})}}></div>
                    
                 </div>
                 <div className = 'shell'>
                    {
                        this.props && this.props.invoiceList && this.props.invoiceList.length > 1 &&
                        <div className = {["button-left", 
                        this.state.invoiceTopIsShow ? "" : "button-left-hidden"
                        ].join(" ")} onClick = {() => {this.buttonRight()}}>
                        </div>
                    }
                    
                    <div className = 'main'>  
                        <div className = {['images', 
                        this.state.invoiceTopIsShow ? "" : "images-hidden"].join(" ")}>
                                {
                                    this.state.list.map((item, index) => {
                                    return (
                                        this.state.invoiceTopIsShow &&
                                        <div className = 'img' style={{left: ((index - this.state.left) *  100 + 5) + "%", transition: this.state.transition}} >
                                            <div className = "images-body">
                                            {
                                                this.state.imgBaseUrl === null ? "" : 
                                                <NCImage
                                                    navbar = {false}
                                                    movable = {false}
                                                >
                                                    <img className = "check-invoce-img" 
                                                        data-original={this.state.imgBaseUrl}
                                                        src = {this.state.imgBaseUrl}
                                                    ></img> 
                                                </NCImage>
                                            }
                                            </div>

                                        </div>
                                    )
                                    })

                                }

                        </div>
                        <div className = {['auditArea', 
                        this.state.invoiceTopIsShow ? "" : "auditArea-max"].join(" ")}>
                            {this.auditSidebar.createComponent()}
                        </div>
                    </div>
                    {
                        this.props && this.props.invoiceList && this.props.invoiceList.length > 1 &&
                        this.state.invoiceTopIsShow &&
                        <div className = 'button-right' onClick={() => {this.buttonLeft()}}></div>
                    }
                 </div>

             </div>
         )
     }
 }

 CheckInvoce = createPage({
    mutiLangCode: '2011'
})(CheckInvoce);

ReactDOM.render(<CheckInvoce />, document.querySelector('#app'))
